<template>
    <orh-table add="add" @on-add="addSilde" pages :pageDate="pageDate" @on-page-change="queryData" reload @on-reload="refresh" search :searchOption="typeliat" :searchOptionSelected="searchOptionSelected" @on-search="searchfun">
        <Row slot="option">
            <Col span="6">
            <semester-change @on-select="peoplebutton1" style="width: 230px;"></semester-change>
            </Col>
            <Col span="3">
            <Upload :action="`${this.$project.axios.baseUrl}/api/teacher/v1/Entrance/import`" name="myfiles" :headers="headers" :on-progress="upload_progress" :on-success="upload_success" :format='formattype' :show-upload-list="false">
                <Button size="small" type="primary" v-button="'daoru'">导入</Button>
            </Upload>
            </Col>
            <Col span="3">
            <Button size="small" type="primary" @click="modalfun('month')" v-button="'daochu'">按月份导出</Button>
            </Col>
            <Col span="3">
            <Button size="small" type="primary" @click="modalfun('semester')" v-button="'daochu'">按学期导出</Button>
            </Col>
        </Row>
        <Table :columns="columns1" :data="datalist" :loading="tableload" slot="table"></Table>

        <Modal v-model="modal1" title="请选择教职工和时间" slot="others">
            <p>
                <div style="width:100%;text-align: center;margin-bottom:5px">
                    <DatePicker v-if="daochutype=='month'" type="month" size="small" placeholder="请选择日期" style="width: 200px" @on-change="timechange"></DatePicker>
                    <semester-change v-if="daochutype=='semester'" :modeltrue="false" @on-select="timechange" style="width: 230px;margin:0 auto"></semester-change>
                </div>
                <teacher @on-select="peoplebutton"></teacher>
                <a href="" class="prompt">已确保您的浏览器已信任本网页</a>
                <div slot="footer">
                    <Button @click="modal1=false">取消</Button>
                    <Button type="primary" @click="exportExcel">导出</Button>
                </div>
            </p>
        </Modal>
        <orh-sidebar v-model="show" :title="pageTitle" scale slot="others">
            <component :is="'Operation'" :infoId="infoId" @backList="backList"></component>
        </orh-sidebar>
    </orh-table>
</template>

<script>
    export default {
        name: 'teacher-attendancerecorddata',
        components: {
            Operation: resolve => {
                require(['./Operation.vue'], resolve);
            },
            Teacher: resolve => require(['&/Authpub/TeacherModule.vue'], resolve),
            SemesterChange: resolve => require(['&/Authpub/semesterchange.vue'], resolve)

        },
        data() {
            return {
                daochutype: '',
                modal1: false,
                exportExcelform: {
                    user_id: null,
                    month: '',
                    semester_id: '',
                },
                headers: {
                    'Authorization': 'Bearer ' + ((localStorage.token) ? (localStorage.token) : '')
                },
                formattype: ['xlsx', 'xls'], //上传文件类型

                searchOptionSelected: '1',
                typeliat: [{
                        value: '1',
                        label: '编码',
                    },
                    {
                        value: '2',
                        label: '姓名',
                    },
                ],

                tableload: false, //表格加载动画

                listUrl: 'api/teacher/v1/certifications/list?page=',
                delUrl: 'api/teacher/v1/certifications/del/',

                pageTitle: '', //右边页面的title

                del: [], //删除
                show: false,

                infoId: null, //用于向修改页面传id值

                pageDate: {
                    total: 0,
                    current_page: 1,
                    per_page: 10
                },

                // 列表接口请求携带参数
                condition: {
                    searchvalue: '',
                    type: '1',
                    semester_id: null,
                },
                datalist: [],

                columns1: [{
                        title: '部门',
                        width: 120,
                        render: (h, params) => {
                            let name = params.row.department_name.zh != '' ? params.row.department_name.department_name.zh : ''
                            return h('div', name);
                        }
                    },
                    {
                        title: '教师姓名',
                        width: 120,
                        render: (h, params) => {
                            let teacher_name = params.row.user_teacher != '' ? params.row.user_teacher[0].teacher_name.zh : ''
                            return h('div', teacher_name);
                        }
                    },
                    {
                        title: '编码',
                        width: 180,
                        key: 'card_code',
                    },
                    {
                        title: '时间',
                        width: 150,
                        key: 'auth_time',

                    },
                    {
                        title: '设备位置',
                        width: 150,
                        key: 'device_ip',
                    },
                    {
                        title: '类型',
                        width: 80,
                        render: (h, params) => {
                            let name = params.row.alert == 1 ? '正常' : (params.row.alert == 2 ? '迟到' : (params.row.alert == 3 ? '早退' : (params.row.alert == 4 ? '旷工' : '未知')))
                            let colorstr = params.row.alert == 1 ? 'green' : (params.row.alert == 2 ? 'red' : (params.row.alert == 3 ? 'red' : (params.row.alert == 4 ? 'red' : '')))
                            return h('span', {
                                style: {
                                    color: colorstr,
                                },
                            }, name)
                        }
                    },
                    {
                        title: ' ',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            let dis = params.row.dayid == null ? true : false
                            return h('div', [
                                h('Button', {
                                    directives: [{
                                        name: 'button',
                                        value: 'edit',
                                    }],
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        // disabled:dis
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.update(params.row.id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    directives: [{
                                        name: 'button',
                                        value: 'del',
                                    }],
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        // disabled:dis
                                    },
                                    style: {
                                        marginRight: '5px',
                                    },
                                    on: {
                                        click: () => {
                                            this.del = [params.row.id]
                                            this.confirm()
                                        }
                                    }
                                }, '删除'),
                            ]);
                        }
                    }
                ],
            }
        },
        methods: {

            /************************************************************
             *
             * 导入部分
             *
             ************************************************************/
            upload_success(str) {
                this.tableload = true
                if (str.code == 200) {
                    this.queryData()
                    this.$Message.success('导入成功')
                } else {
                    this.$Message.error(str.message)
                    this.tableload = false
                }
            },
            upload_progress() {
                this.tableload = true
            },

            /************************************************************
             *
             * 导出部分
             *
             ************************************************************/
            modalfun(type) {
                this.daochutype = type
                if (this.daochutype == 'month') {
                    this.exportExcelform.semester_id = ''
                }
                if (this.daochutype == 'semester') {
                    this.exportExcelform.month = ''
                }
                this.modal1 = true
            },
            exportExcel() {
                let str = ''
                if (this.daochutype == 'month') {
                    str = this.exportExcelform.month
                }
                if (this.daochutype == 'semester') {
                    str = this.exportExcelform.semester_id
                }

                if (str == '') {
                    this.$Message.warning('请选择时间');
                    return
                } else if (this.exportExcelform.user_id == null) {
                    this.$Message.warning('请选择教职工');
                    return
                } else {
                    this.$http.get("api/teacher/v1/Entrance/exportExcel?user_id=" + this.exportExcelform.user_id + "&month=" + this.exportExcelform.month + "&semester_id=" + this.exportExcelform.semester_id + "")
                        .then(val => {
                            this.modal1 = false
                            window.open(val.data.url)

                        })
                        .catch(err => {
                            if (err.code && err.code == 422) {
                                this.$Message.error(err.message);
                            }
                        });

                }

            },
            //点击人员
            peoplebutton(id) {
                this.exportExcelform.user_id = id.value
            },
            // 点击时间
            timechange(val) {
                if (this.daochutype == 'month') {
                    this.exportExcelform.month = val
                }
                if (this.daochutype == 'semester') {
                    this.exportExcelform.semester_id = val
                }

            },


            /************************************************************
             *
             * 请求列表数据
             *
             ************************************************************/
            queryData(index = 1) {
                this.tableload = true
                this.$http.get(`${this.listUrl}${index}`, {
                        params: this.condition
                    })
                    .then(val => {
                        this.datalist = val.data.data
                        if (val.pages) {
                            this.pageDate.total = val.data.total
                            this.pageDate.per_page = val.data.per_page
                            this.pageDate.current_page = val.data.current_page
                        }
                        this.tableload = false
                    })
                    .catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.tableload = false;
                    })
            },


            /************************************************************
             *
             * 刷新数据（当前分页）
             *
             ************************************************************/
            refresh() {
                this.queryData(this.pageDate.current_page)
            },

            /************************************************************
             *
             * 点击添加
             *
             ************************************************************/
            addSilde() {
                this.show = true
                this.infoId = false
                this.pageTitle = '添加'
            },

            /************************************************************
             *
             * 点击编辑
             *
             ************************************************************/
            update(index) {
                this.infoId = index
                this.show = true
                this.pageTitle = '修改'
            },

            /************************************************************
             *
             * 修改添加返回数据更新
             *
             ************************************************************/
            backList(val) {
                if (val == true) {
                    this.show = false
                    this.queryData(this.pageDate.current_page);
                }
            },

            /************************************************************
             *
             * 执行删除操作
             *
             ************************************************************/
            confirm() {
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>您确定要删除这些数据吗?</p>',
                    onOk: () => {
                        if (this.del.length == 0) {
                            this.$Message.error('请选择删除项');
                            return
                        }
                        this.del = JSON.stringify(this.del)
                        this.tableload = true
                        this.$http.delete(`${this.delUrl}${this.del}`)
                            .then(val => {
                                this.del = []
                                this.queryData(this.pageDate.current_page)
                                this.$Message.success(val.message);
                            })
                            .catch(err => {
                                if (err.code && err.code == 422) {
                                    this.$Message.error(err.message);
                                }
                                this.del = []
                                this.tableload = false
                            })
                    },
                });
            },

            /************************************************************
             *
             * 关键字搜索请求列表数据
             *
             ************************************************************/
            searchfun(val, type) {
                this.condition.type = type
                this.condition.searchvalue = val
                this.listUrl = 'api/teacher/v1/certifications/list?page='
                this.queryData()
            },

            /************************************************************
             *
             * 点击学年学期请求列表数据
             *
             ************************************************************/
            peoplebutton1(val) {
                this.condition.semester_id = val
                this.listUrl = 'api/teacher/v1/certifications/list?page=',
                    this.queryData()

            },

        },
        mounted() {
            this.queryData()
        }
    }
</script>
